<!-- 在线客服的页 -->
<template>
  <div class="Customer">
    <div class="Customer_top">
      <span class="iconfont icon-chevron-thin-left" @click="Customer"></span>
      <p>在线客服</p>
      <div></div>
    </div>
    <!-- 聊天内容 -->
    <div class="show" ref="show"></div>
    <div class="inps">
      <input
        type="text"
        name=""
        v-model="val"
        placeholder="请输入聊天内容..."
        ref="input"
      />
      <span class="icon iconfont icon-biaoqing"></span>
      <span class="icon iconfont icon-jiahao-"></span>
    </div>
  </div>
</template>
<script>
import * as API from "@/components/api/hanjinqi.js";
import webSocket from "../../../components/utlis/webSocket";
// import axios from 'axios'
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      val: ""
    };
  },

  // 监听属性
  computed: {},
  // 组件挂载的地方
  components: {},
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    // console.log(localStorage.getItem("token"))
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.xuanuser();
    console.log(this.$route.query.path);
    let tha = this;
    this.$refs.input.onfocus = () => {
      console.log("获取焦点,可以点击回车键发送消息");
      //   获取键盘码事件
      this.$refs.input.onkeydown = function(e) {
        //   var ev = document.all ? window.event : e;
        console.log(e.keyCode);
        if (e.keyCode == 13) {
          e.preventDefault(); //禁止键盘默认事件
          tha.xuanuser();
          console.log("发送信息");
          //  点击发消息
          if (!tha.val) {
            tha.$toast({
              message: "请输入要发送的信息",
              position: "bottom"
            });
          } else {
            tha.xuanuser();
            webSocket.send(
              JSON.stringify({
                // type值如果为message 表示要发送信息给客服
                type: "message",
                uid: JSON.parse(localStorage.getItem("token")).uid,
                //需要发送的内容
                mess: tha.val,
                // 发送消息的时间
                createTime: new Date() - 0,
                img: JSON.parse(localStorage.getItem("token")).img
              })
            );
            tha.val = "";
          }
        }
      };
    };
    // 监听服务器返回信息时执行
    webSocket.onmessage = function(obj) {
      let msg = JSON.parse(obj.data);
      // 首先判断该用户有没有登录 没有登录会返回--01
      if (msg.code === "01") {
        console.log("没有登录");
        alert("请先登录喔");
      } else {
        console.log("登录了");
        // 接收服务器返回的信息
        // 只有对应用户才能接收到
        console.log(msg);
        if (msg.uid === JSON.parse(localStorage.getItem("token")).uid) {
          if (msg.img) {
            tha.$refs.show.innerHTML += `<div class="user_message" style="
            width: 100%;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: flex-end;"><span>${msg.mess}</span>:<span><img src="
            ${msg.img}
            " style=" width: 50px; height: 50px;"></img></span></div><br>`;
          } else {
            tha.$refs.show.innerHTML += `<div class="user_message" style="
            width: 100%;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: flex-end;"><span>${msg.mess}</span>:<span><img src="
            https://cdn.jsdelivr.net/gh/zmf-6/cdn//img/portraits.png
            " style=" width: 50px; height: 50px;"></img></span></div><br>`;
          }
        } else {
          if (msg.img) {
            tha.$refs.show.innerHTML += `<div class="user_message" style="
            width: 100%;
            font-size: 20px;
            display: flex;
            align-items: center;"><span><img src="
            ${msg.img}
            " style=" width: 50px; height: 50px;"></img>:<span>${msg.mess}</span></span></div><br>`;
          } else {
            tha.$refs.show.innerHTML += `<div class="user_message" style="
            width: 100%;
            font-size: 20px;
            display: flex;
            align-items: center;"><span><img src="
            https://cdn.jsdelivr.net/gh/zmf-6/cdn//img/portraits.png
            " style=" width: 50px; height: 50px;"></img></span>:<span>${msg.mess}</span></div><br>`;
          }
        }
      }
    };
  },
  // Vue方法定义
  methods: {
    Customer() {
      this.$router.push({ path: this.$route.query.path });
    },
    // 输入框获取焦点事件
    Focus() {
      console.log("获取焦点");
      this.$refs.input.onkeydown = function(e) {
        //   var ev = document.all ? window.event : e;
        console.log(e.keyCode);
        //回车
        if (e.keyCode == 13) {
          e.preventDefault(); //禁止键盘默认事件
          console.log("发送信息");
        }
      };
    },
    async xuanuser() {
      let res = await API.getMessage({
        uid: JSON.parse(localStorage.getItem("token")).uid,
        Toid: 35
      });
      console.log(res);
      let show = ``;
      res.data.forEach((item, index) => {
        //   默认渲染
        if (item.uid === 35) {
          if (item.img) {
            show += `<div class="user_message" style="
            width: 100%;
            font-size: 20px;
            display: flex;
            align-items: center;"><span><img src="
            ${item.img}
            " style=" width: 50px; height: 50px;"></img>:<span>${item.mess}</span></span></div><br>`;
          } else {
            show += `<div class="user_message" style="
            width: 100%;
            font-size: 20px;
            display: flex;
            align-items: center;"><span><img src="
            https://cdn.jsdelivr.net/gh/zmf-6/cdn//img/portraits.png
            " style=" width: 50px; height: 50px;"></img></span>:<span>${item.mess}</span></div><br>`;
          }
        } else {
          if (item.img) {
            show += `<div class="user_message" style="
            width: 100%;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: flex-end;"><span>${item.mess}</span>:<span><img src="
            ${item.img}
            " style=" width: 50px; height: 50px;"></img></span></div><br>`;
          } else {
            show += `<div class="user_message" style="
            width: 100%;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: flex-end;"><span>${item.mess}</span>:<span><img src="
            https://cdn.jsdelivr.net/gh/zmf-6/cdn//img/portraits.png
            " style=" width: 50px; height: 50px;"></img></span></div><br>`;
          }
        }
      });
      this.$refs.show.innerHTML = show;
    }
  }
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
@import url("../../../components/font_zmf/iconfont.css");
.Customer {
  width: 100%;
  height: 100%;
  z-index: 3;
  position: fixed;
  left: 0;
  top: 0;
  background: white;
  background: rgb(252, 250, 250);
}
.Customer_top {
  width: 100%;
  height: 40px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding-left: 10px;
}
.inps {
  width: 100%;
  height: 50px;
  background: rgb(233, 232, 232);
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-left: 10px;
}
.inps input {
  width: 75%;
  height: 35px;
  border: none;
  border-radius: 8px;
  padding: 0 10px 0 5px;
  caret-color: rgb(55, 180, 118);
}
.inps .icon {
  font-size: 25px;
}
.show {
  width: 100%;
  height: calc(100% - 90px);
  background: rgba(248, 241, 241, 0.644);
  overflow-y: auto;
}
</style>
